import React, {Component} from 'react'
import {DeviceInfo, Modal, TouchableHighlight,Platform, ScrollView, StyleSheet, Text, View} from 'react-native'
import ThemeDao from "../../../dao/ThemeDao.js"
import MinaStyle from '../../../assets/css/commonStyle.js'
import ThemeFactory, {ThemeFlags} from "../../../assets/css/ThemeFactory.js"
import actions from "../../../redux/action";
import {connect} from "react-redux";

class CustomTheme extends Component {
  constructor(props) {
    super(props);
    this.themeDao = new ThemeDao();
  }

  onSelectTheme(themeKey) {
    // this.props.onClose();
    this.themeDao.save(ThemeFlags[themeKey]);
    const {onThemeChange} = this.props;
    onThemeChange(ThemeFactory.createTheme(ThemeFlags[themeKey]));
  }

  /**
   * 创建主题Item
   * @param themeKey
   */
  getThemeItem(themeKey) {
    return <TouchableHighlight
      style={{flex: 1}}
      underlayColor='white'
      onPress={() => this.onSelectTheme(themeKey)}
    >
      <View style={[{backgroundColor: ThemeFlags[themeKey]}, styles.themeItem]}>
        <Text style={styles.themeText}>{themeKey}</Text>
      </View>
    </TouchableHighlight>
  }

  renderThemeItems() {
    const views = [];
    for (let i = 0, keys = Object.keys(ThemeFlags), l = keys.length; i < l; i += 3) {
      const key1 = keys[i], key2 = keys[i + 1], key3 = keys[i + 2];
      views.push(<View key={i} style={{flexDirection: 'row'}}>
        {this.getThemeItem(key1)}
        {this.getThemeItem(key2)}
        {this.getThemeItem(key3)}
      </View>)
    }
    return views;
  }

  renderContentView() {
    return (
      <Modal
        animationType={"slide"}
        transparent={true}
        visible={this.props.visible}
        onRequestClose={() => {
          this.props.onClose()
        }}
      >
        <View style={styles.modalContainer}>
          <ScrollView>
            {this.renderThemeItems()}
          </ScrollView>
        </View>
      </Modal>
    )
  }

  render() {
    let view =  <View style={[MinaStyle.minaContainer, {flex: 1, backgroundColor: '#ccc'}]}>
      {this.renderContentView()}
    </View> ;
    return view;
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
  onThemeChange: (theme) => dispatch(actions.onThemeChange(theme))
});
//注意：connect只是个function，并不应定非要放在export后面
export default connect(mapStateToProps, mapDispatchToProps)(CustomTheme);

const styles = StyleSheet.create({
  themeItem: {
    flex: 1,
    height: 120,
    margin: 3,
    padding: 3,
    borderRadius: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalContainer: {
    flex: 1,
    margin: 10,
    marginBottom: 10 + (DeviceInfo.isIPhoneX_deprecated ? 24 : 0),
    marginTop: Platform.OS === 'ios' ? 20 + (DeviceInfo.isIPhoneX_deprecated ? 24 : 0) : 10,
    backgroundColor: 'white',
    borderRadius: 3,
    shadowColor: 'gray',
    shadowOffset: {width: 2, height: 2},
    shadowOpacity: 0.5,
    shadowRadius: 2,
    padding: 3
  },
  themeText: {
    color: 'white',
    fontWeight: '500',
    fontSize: 16
  }
});
